<template>
  <!-- 商标使用许可提前终止备案表 -->
  <div class="total">
    <h1>
      <span>商标使用许可提前终止备案表</span>
    </h1>
    <el-form :label-position="right" label-width="180px" size="mini">
      <el-form-item label="许可人名称(中文) :">
        <span>{{record.appName}}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{record.appNameEn}}</span>
      </el-form-item>
      <el-form-item label="许可人地址(中文) :">
        <span>{{record.busAddress}}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{record.appAddEn}}</span>
      </el-form-item>
      <el-form-item label="被许可人名称(中文) :">
        <span>{{record.beNameLicensee}}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{record.beNameLicenseeEn}}</span>
      </el-form-item>
      <el-form-item label="被许可人地址(中文) :">
        <span>{{record.beNameLicenseeAddr}}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{record.beNameLicenseeAddrEn}}</span>
      </el-form-item>
      <div v-if="record.selectType == 0 || record.selectType == 1">
        <el-row v-if="record.iddbimage">
          <el-col class="mar">
            <el-form-item label="被许可人身份证(正反) :">
              <div class="idcar">
                <span>
                  <imgshow>
                    <img :src="mconfig.host+record.iddbimage" alt />
                  </imgshow>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="mar">
            <el-form-item label="被许可人营业执照 :">
              <div class="idcar">
                <span>
                  <imgshow>
                    <img :src="mconfig.host+record.licenseesBusimg" alt />
                  </imgshow>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row v-if="record.selectType == 9">
        <el-col class="mar">
          <el-form-item label="其他被许可证件 :">
            <div class="idcar">
              <span>
                <imgshow>
                  <img :src="mconfig.host+record.licenseesBusimg" alt />
                </imgshow>
              </span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="邮政编码 :">
        <span>{{record.postCode}}</span>
      </el-form-item>
      <el-form-item label="联系人 :">
        <span>{{record.contacts}}</span>
      </el-form-item>

      <el-form-item label="邮箱 :">
        <span>{{record.email}}</span>
      </el-form-item>

      <el-form-item label="电话 :">
        <span>{{record.phone}}</span>
      </el-form-item>
      <el-form-item label="代理机构名称 :">
        <span>{{record.deptName}}</span>
      </el-form-item>
      <el-form-item label="商标注册号 :">
        <span>{{record.appNum}}</span>
      </el-form-item>
      <div class="choice">
        <el-form-item label="是否共有商标 :">
          <!-- <el-checkbox-group v-model="record.isShare"> -->
          <span v-show="record.isShare[0] != 0">是</span>
          <span v-show="record.isShare[0] == 0">否</span>
          <!-- </el-checkbox-group> -->
        </el-form-item>
      </div>
      <el-form-item label="原商标使用许可备案号 :">
        <span>{{record.licenseRecordNumber}}</span>
      </el-form-item>
      <div class="positions">
        <el-form-item label="提前终止日期 :">
          <span>{{record.endDate}}</span>
        </el-form-item>
        <el-form-item label="提前终止理由 :">
          <span>{{record.endWithdrawal}}</span>
        </el-form-item>
      </div>
      <el-row>
        <el-col class="mar" :span="10">
          <el-form-item label="营业执照 :">
            <div class="idcar">
              <span>
                <imgshow>
                  <img :src="mconfig.host+record.busimg" alt />
                </imgshow>
              </span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="mar" v-show="record.visit">
          <el-form-item label="身份证 :">
            <div class="idcar">
              <span>
                <imgshow>
                  <img :src="mconfig.host+record.idcardimg" alt />
                </imgshow>
              </span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item class="mar" label="网上确认书 :">
        <imgshow>
          <span class="qrfileBox">
            <img :src="imgURL(record.qrfile)" />
          </span>
        </imgshow>
      </el-form-item>

      <!--<el-form-item class="mar" label="其他附件 :" v-if="record.otherfile != []">-->
      <el-form-item class="mar" label="其他附件 :" v-if="record.otherfile.length>0">
        <imgshow v-for="(item,index) in record.otherfile" :key="index">
        <span class="qrfileBox"><img :src="imgURL(item)" ></span>
        </imgshow>
      </el-form-item>

    </el-form>
    <!-- 签字/章戳 -->
    <div class="signs">
      <div class="sign">
        <div>
          <span>许可人章戳(签字) :</span>
        </div>
        <div>
          <span>被许可人章戳(签字) :</span>
        </div>
        <div>
          <span>代理机构章戳 :</span>
        </div>
      </div>
      <div class="agent">
        <p>代理人签字 :</p>
      </div>
      <p class="careful">注：请 按 说 明 填 写</p>
    </div>

    <section v-if="flag">
      <div class="model-title">
        <h4>商标使用许可提前终止备案表</h4>
        <p>（附页）</p>
        <p style="font-size:16px">其他共有人</p>
      </div>
      <div>
        <proAppend class="form20" :callback="otherPublic"></proAppend>
      </div>
    </section>
  </div>
</template>
<script>
import imgshow from "../common/imgshow";

import proAppend from "../common/proAppend";
export default {
  components: {
    imgshow,
    proAppend,
  },
  name: "TrademarkUse",
  data() {
    return {
      right: "right",
      id: "",
      record: {
        email: "",
        qrfile: "",
        beNameLicensee: "", //  被许可人名称（中文）
        beNameLicenseeAddr: "", //  被许可人地址（中文）
        beNameLicenseeAddrEn: "", //  被许可人地址（英文）
        beNameLicenseeEn: "", //  被许可人名称（英文）
        branchNetworkId: "", //  网点编号
        confirmation: "", //  上传确认书：（图片）
        contacts: "", //  联系人
        endDate: "", //  提前终止日期
        endWithdrawal: "", //  提前终止理由
        isShare: ["1"], //  是否共享 1:是，0：否
        licenseRecordNumber: "", //  原商标使用许可备案号
        busAddress: "", //  许可人地址：(中文)
        appAddEn: "", //  许可人地址：(英文)
        appName: "", //  许可人名称（中文）
        appNameEn: "", //  许可人名称：英文
        phoneNum: "", //  电话
        postcode: "", //  邮政编号
        proAppendJson: "", //  共享人 json
        deptName: "", //  代理机构名称
        registNum: "", //  商标注册号
        subStatus: "2", //  状态 1保存 2选择通过 3选择未通过 4未审核
        userId: "", //  用户id
        busimg: "", //营业执照
        idcardimg: "", //身份证
        idcardface: "",
        iddbimage: "",
        visit: false,
        otherfile:[]
      },
      // 其他共有人
      otherPublic: [],
      flag: true,
      vistii: true,
      vistiv: true,
    };
  },
  methods: {
    imgURL(_url) {
      var newUrl = this.mconfig.host + _url;
      return newUrl;
    },
    interface() {
      //console.log(this.$route.query.id);
      this.$http
        .get("/trademark/tletof/findByIdDetl", {
          params: { id: this.$route.query.id },
        })
        .then((res) => {
          //console.log(res);
          this.record = res.data.data.data;
          let append = res.data.data.append;
          this.record.isShare = [this.record.isShare];
          // 共有人...
          this.otherPublic = append;
          if (this.otherPublic.length == 0) {
            this.flag = false;
          } else {
            this.flag = true;
          }
          this.busimg = res.data.data.busimg;
          this.idcardimg = res.data.data.idcardimg;
          this.idcardface = res.data.data.idcardface;
          this.record.otherfile = JSON.parse(this.record.otherfile)

          this.idcardimgs(this.record.idcardimg.length);
        });
    },
    idcardimgs(e) {
      if (e > 0) {
        this.record.visit = true;
      } else {
        this.record.visit = false;
      }
    },
  },
  mounted() {
    this.interface();
    // console.log(this.record.iddbimage)
  },
};
</script>
<style scoped >
.mar {
  margin-top: 10px;
}
.form20 {
  margin-left: 235px;
}
.total {
  /* border: 1px solid red; */
  width: 1200px;
}
.total h1 {
  padding: 30px 0;
  font-weight: 500;
  font-size: 30px;
}
.total h1 span {
  margin-left: 310px;
}
.el-form {
  margin-left: 270px;
}
.total div {
  margin-bottom: 0;
}

.positions {
  /* margin: 30px 0; */
  margin-bottom: 30px;
}

/* 签字 */
.signs {
  display: none;
}
.sign {
  display: flex;

  justify-content: center;
  margin-top: 100px;
}
.sign div {
  width: 200px;
  margin: 15px;
}
.sign div span {
  color: #000;
}
/* 代理人 */
.signs .agent {
  margin-top: 100px;
  margin-right: 350px;
  text-align: right;
}
.signs .careful {
  margin-top: 40px;
  margin-left: 310px;
  color: #999;
}

/* 附加页 */
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.additional {
  margin-top: 150px;
  height: 300px;
}
.additional h2 {
  text-align: center;
  font-weight: 500;
}
.additional .other {
  margin-top: 40px;
}
.additional .other .main {
  text-align: center;
  margin-top: 20px;
}

.additional ul {
  margin-top: 50px;
  margin-left: 300px;
}
.additional ul li {
  margin: 10px 0;
}

.additional ul li span {
  display: inline-block;
  width: 106px;
  text-align: right;
  color: #000;
}

.additional ul li p {
  display: inline-block;
  margin-left: 300px;
  color: #ccc;
  margin-top: -8px;
}

.model-title {
  padding: 0 100px;
  margin-left: 220px;
  color: #666;
  font-weight: 400;
  margin-top: 44px;
  margin-bottom: 40px;
}
.model-title h4,
.model-title p {
  margin: 10px 0;
}
.model-title p:nth-child(3) {
  margin-left: 15px;
}
.model-title > h4 {
  font-size: 20px;
  font-weight: 600;
}
.seal {
  padding: 0 20px;
}
.seal-container {
  min-height: 150px;
}
/* 签字 */
.signature {
  color: #ccc;
}
.businessstyle {
  width: 700px;

  padding: 0px;
  margin: 0px;
  padding: 20px 0px;
}

.idcar {
  float: left;
  justify-content: space-around;
}
.idcar span {
  display: inline-block;
  margin: 0px;
  padding: 0px;
}
/* .idcar span img {
  padding: 10px;
} */
</style>
